<template>
  <view class="page">
    <view class="background-view"> </view>
    <view class="userInfo-box">
      <image class="userImage" src="@/static/myIcon/5.png"></image>
      <view class="user-text">
        <view class="view-item text-overflow">张刘斌</view>
        <view class="view-item text-overflow"
          >热爱自己喜欢的东西</view
        >
      </view>
      <view class="config flex-center">
        <image src="@/static/myIcon/config.png"></image>
      </view>
    </view>
    <view class="user-info-card">
      <view class="item">
        <view class="item-1 text-overflow">收藏</view>
        <view class="item-2 text-overflow">0</view>
      </view>
      <view class="item">
        <view class="item-1 text-overflow">积分</view>
        <view class="item-2 text-overflow">0</view>
      </view>
      <view class="item">
        <view class="item-1 text-overflow">优惠卷</view>
        <view class="item-2 text-overflow">125</view>
      </view>
    </view>
    <view class="list-box">
      <view class="box">
        <view class="box-title">
          <view class="text1">订单中心</view>
          <view class="text2"
            ><text>查看全部</text>
            <image src="@/static/myIcon/right.png"></image
          ></view>
        </view>
        <view class="box-content">
          <view
            v-for="(item, index) in list1"
            :key="index"
            class="item"
            @click="skipMethod(item.pathUrl)"
          >
            <view class="item1 flex-center">
              <image :src="item.imgPath"></image>
            </view>
            <view class="item2 text-overflow flex-center">
              {{ item.imgText }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="list-box">
      <view class="box">
        <view class="box-title">
          <view class="text1">我的服务</view>
        </view>
        <view class="box-content">
          <view
            v-for="(item, index) in list2"
            :key="index"
            class="item"
            @click="skipMethod(item.pathUrl)"
          >
            <view class="item1 flex-center">
              <image :src="item.imgPath"></image>
            </view>
            <view class="item2 text-overflow flex-center">
              {{ item.imgText }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
 <style lang="scss" scoped>
.page {
  position: relative;
  height: 100vh;
  background-color: #f2f2f2;
}
.background-view {
  height: 30%;
  background-color: #3cb79a;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.userInfo-box {
  top: 4%;
  position: absolute;
  width: 80%;
  left: 50%;
  transform: translate(-50%, 0);
  height: 120rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  .userImage {
    width: 20%;
    height: 100%;
    border-radius: 50%;
  }
  .user-text {
    width: 70%;
    color: white;
    font-size: 1em;
    .view-item {
      margin-left: 20rpx;
      line-height: 2;
    }
  }
  .config {
    width: 10%;
    overflow: hidden;
    height: 100%;
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
.user-info-card {
  top: 18%;
  position: absolute;
  width: 80%;
  left: 50%;
  transform: translate(-50%, 0);
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 30rpx;
  background-color: white;
  border-radius: 40rpx;
  box-shadow: 0px 1px 2px #e3e3e3;
  .item {
    width: 35%;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100%;
    .item-1 {
      color: #bdbdbd;
      font-size: 1.2em;
      width: 100%;
      text-align: center;
    }
    .item-2 {
      text-align: center;
      width: 100%;
      margin-top: 10rpx;
    }
  }
}
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-box {
  // height: 380rpx;
  padding: 30rpx;
  // background-color: lightgreen;
  .box {
    background-color: white;
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
    border-radius: 20rpx;
    box-shadow: 0px 1px 2px #e3e3e3;
    .box-title {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid #d8d8d8;
      .text1 {
        font-size: 1.3em;
        text-indent: 1em;
      }
      .text2 {
        color: #d8d8d8;
        font-size: 1.2em;
        display: flex;
        align-items: center;
        margin-right: 20rpx;
        image {
          margin-left: 20rpx;
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
    .box-content {
      height: 60%;
      padding: 20rpx 40rpx 40rpx 40rpx;
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      .item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20rpx;
        height: 100%;
        .item1 {
          height: 50%;
          width: 100%;
          text-align: center;
          image {
            width: 65rpx;
            height: 65rpx;
          }
        }
        .item2 {
          height: 50%;
          width: 100%;
          font-size: 0.9em;
        }
      }
    }
  }
}
.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
 
<script>
export default {
  data() {
    return {
      list1: [
        {
          // 图片路径
          imgPath: "../../static/myIcon/3.png",
          // 图片文字
          imgText: "待付款",
          // 此区域点击跳转的页面
          pathUrl: "/pages/dfk/dfk",
        },
        {
          // 图片路径
          imgPath: "../../static/myIcon/2.png",
          // 图片文字
          imgText: "待发货",
          // 此区域点击跳转的页面
          pathUrl: "2",
        },
        {
          // 图片路径
          imgPath: "../../static/myIcon/4.png",
          // 图片文字
          imgText: "待收货",
          // 此区域点击跳转的页面
          pathUrl: "3",
        },
        {
          // 图片路径
          imgPath: "../../static/myIcon/1.png",
          // 图片文字
          imgText: "待评价",
          // 此区域点击跳转的页面
          pathUrl: "4",
        },
        {
          // 图片路径
          imgPath: "../../static/myIcon/5.png",
          // 图片文字
          imgText: "售后/退款",
          // 此区域点击跳转的页面
          pathUrl: "5",
        },
      ],
      list2: [
        {
          // 图片路径
          imgPath: "../../static/myIcon/2-5.png",
          // 图片文字
          imgText: "我的推广",
          // 此区域点击跳转的页面
          pathUrl: "1",
        },
        {
          // 图片路径
          imgPath: "../../static/myIcon/2-4.png",
          // 图片文字
          imgText: "我的余额",
          // 此区域点击跳转的页面
          pathUrl: "2",
        },
        {
          // 图片路径
          imgPath: "../../static/myIcon/2-6.png",
          // 图片文字
          imgText: "地址信息",
          // 此区域点击跳转的页面
          pathUrl: "3",
        },
        {
          // 图片路径
          imgPath: "../../static/myIcon/2-2.png",
          // 图片文字
          imgText: "我的收藏",
          // 此区域点击跳转的页面
          pathUrl: "4",
        },
        {
          // 图片路径
          imgPath: "../../static/myIcon/2-3.png",
          // 图片文字
          imgText: "优惠卷",
          // 此区域点击跳转的页面
          pathUrl: "5",
        },
        {
          // 图片路径
          imgPath: "../../static/myIcon/2-1.png",
          // 图片文字
          imgText: "会员等级",
          // 此区域点击跳转的页面
          pathUrl: "6",
        },

      ],
    };
  },
  //监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
  onInit() {},
  //监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
  onLoad() {},
  //监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  //监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
  beforeDestroy() {},
  //页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
  onReachBottom() {},
  onShareAppMessage(res) {},
  created() {},
  methods: {
    // 跳转页面
    skipMethod(url) {
      uni.navigateTo({
        url
      })
    },
  },
};
</script>
